<template>
    <div class="outter">
        <div class="inputClass">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <h2>注册</h2>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-radio-group v-model="ruleForm.position" size="medium">
                        <el-radio border label="门店管理员"></el-radio>
                        <el-radio border label="后台管理员"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="ruleForm.gender" size="medium">
                        <el-radio border label="男"></el-radio>
                        <el-radio border label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
                <div style="font-size:13px; width:100%; text-align:center;">
                    <span>已有账号？</span>
                    <a href="#/login" style="color:rgb(214, 40, 40)">前往登录</a>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("storeManager");
let reNumber = /^1[3456789]\d{9}$/;
export default {
    data() {
        let checkUsername = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
            setTimeout(() => {
                if (value.length < 2) {
                    callback(new Error('请输入用户名'));
                } else {
                    this.usernameIsExistAsync({value, callback})
                }
            }, 1000);
        };
        let checkName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('姓名不能为空'));
            }
            setTimeout(() => {
                if (value.length < 2) {
                    callback(new Error('请输入姓名'));
                } else {
                    callback();
                }
            }, 1000);
        };
        let checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 1000);
        };
        let checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            }
            setTimeout(() => {
                if (reNumber.test(value)) {
                    callback();
                } else {
                    callback(new Error('请输入手机号'));
                }
            }, 1000);
        };
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPassword !== '') {
                    this.$refs.ruleForm.validateField('checkPassword');
                }
                callback();
            }
        };
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: '',
                password: '',
                checkPassword: '',
                name: '',
                age: "",
                position: '',
                gender: '',
                phoneNumber: "",
            },
            rules: {
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ],
                name: [
                    { validator: checkName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPassword: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                age: [
                    { validator: checkAge, trigger: 'blur' }
                ],
                phoneNumber: [
                    { validator: checkPhoneNumber, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        ...mapActions(["addNewManagerAsync", "usernameIsExistAsync"]),
        // 提交点击
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(valid);
                    if(this.ruleForm.position != "" || this.ruleForm.gender != ""){
                        this.addNewManagerAsync({username: this.ruleForm.username, password: this.ruleForm.password, name: this.ruleForm.name, gender: this.ruleForm.gender, age: this.ruleForm.age+"", phoneNumber: this.ruleForm.phoneNumber+"", position: this.ruleForm.position})
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>

<style>
.demo-ruleForm{
 margin-right: 50px
}
.outter{
    height: 100vh;
    background-image: url("../assets/f4b77733385c4dab19c6a002f5670470.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.inputClass{
    width: 450px;
    border-radius: 30px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95%;
    margin: auto 0 auto 750px;
}
h2{
    text-align: center;
}
</style>